<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>user login</title>
    <link rel="stylesheet" href="login.css">
    <script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script>
</head>
<body>
<div class="Box">
    <form action="">
        <h3>欢迎登录</h3>
        <p class="desc">WELCOME LOGIN</p>
        <input type="text" placeholder="请输入账号" required>
        <input type="password" placeholder="请输入密码" required>
        <input type="submit" class="loginBtn" value="立即登录"></button>
        <p class="no">
            <span>忘记密码</span>
            <span>没有账号？立即注册</span>
        </p>
    </form>
</div>
</body>
</html>

<script>
    // 动态背景

    // 蓝色
    bubbly();

    // 紫色
    // bubbly({
    // colorStart: "#4c004c",
    // colorStop: "#1a001a",
    // bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`
    // });

    // Black/red
    // bubbly({
    // colorStart: "#111",
    // colorStop: "#422",
    // bubbleFunc: () => `hsla(0, 100%, 50%, ${Math.random() * 0.25})`
    // });
</script>